<template>
  <layout>
    <template v-slot:title>表单编辑</template>

    <template v-slot:actions>
      <el-button type="primary" @click="save"><i class="el-icon-edit-outline" />保存</el-button>
    </template>
    <div class="form-list">
      <v-form-designer ref="vformDesign" @onFormDataSave="saveData" :optionData="formOptionData">
        <!-- <template v-slot:toolbar> -->
        <!-- <el-button type="text" @click="save"><i class="el-icon-edit-outline" />保存</el-button> -->
        <!-- </template> -->
      </v-form-designer>
    </div>
  </layout>
</template>
<script>
import { default as apiList } from '@/apis/list';
import layout from '@/components/Layout';
export default {
  name: 'form-list',
  components: { layout },
  data() {
    return {
      pageSize: 5,
      pageNum: 1,
      item: {},
      formOptionData:{
        functionCalculate:(data,callback)=>{
            this.calculate(data).then(res=>{
                callback(res.data);
            })            
        }
      }
    };
  },
  created() {
    this.loadForm();
  },
  methods: {
    ...apiList,
    loadForm: function () {
      this.getForm(this.$route.query.id).then(res => {
        this.item = res.data;
        this.$refs.vformDesign.setFormJson(JSON.parse(this.item.formConfig));
      });
    },
    //仅保存表单配置
    save: function (callback) {
      let formJson = this.$refs.vformDesign.getFormJson(true);
      this.item.formConfig = JSON.stringify(formJson);

      this.saveForm(this.item).then(res => {
        if (res.data == true) {
          this.$message.success('保存成功');
          this.naviBack();
        }
      });
    },
    //同时保存表单配置和数据
    saveData: function (data) {
      this.item.formConfig = JSON.stringify(data.formConfig);
      this.item.formData = JSON.stringify(data.formData);
      this.saveForm(this.item).then(res => {
        if (res.data == true) {
          this.$message.success('保存成功');
          this.naviBack();
        }
      });
    },
    naviBack() {
      setTimeout(() => {
        this.$router.go(-1);
      }, 1500);
    },
  },
};
</script>
<style scoped lang="scss">
.form-list {
  width: 100%;
  height: 100%;

  $topHeight: 80px; //修改标题栏高度
  $footHeight: 50px; //修改底部栏高度

  &-header {
    height: $topHeight;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
    border-bottom: 2px dashed #cccccc;

    div {
      height: $topHeight;
      line-height: $topHeight;
      vertical-align: middle;
    }
    &-title {
      margin-right: 200px;
      display: block;
      text-align: left;
      font: {
        size: 20px;
        weight: bold;
      }
      color: #409eff;
    }
    &-actions {
      width: 200px;
      text-align: right;
      float: right;
    }
  }
  &-table {
    height: calc(100vh - $topHeight - $footHeight);
    padding: 10px 20px;
    box-sizing: border-box;
  }
  &-pager {
    height: $footHeight;
    line-height: $footHeight;
  }
}
</style>